<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">

      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="用户昵称或手机号" style="width:300px;margin-right:20px"></el-input>
        <el-select v-model="authStatusOption"  clearable placeholder="审核状态" style="margin:0 20px;">
          <el-option
            v-for="item in authStatusOptionsSearch"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <!-- <el-button type="primary" size="medium" @click="addStaffVisible=true">添加</el-button> -->
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div >
            <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="realname"
        label="真实名字"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="id_card"
        label="身份证"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="unit_name"
        label="单位名称"
        show-overflow-tooltip
        width="180">
        <!-- <template  slot-scope="scope" v-if="scope.row">

            <div @click.stop="showConsultation(scope.row)" style="cursor:pointer;color:#409EFF">{{scope.row.realname?scope.row.realname:scope.row.nickname}}</div>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="job"
        label="岗位"
        show-overflow-tooltip
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="在职证明"
        show-overflow-tooltip
        width="100"
      >
        <template  slot-scope="scope" >
          <el-button type="primary" size="mini" @click="showLicense(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="提交时间"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="auth_status"
        label="审核状态"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope" >
          <div>
            <!--                        <el-tag v-show="scope.row.is_auth==0">未审核</el-tag>-->
            <el-tag type="success">{{scope.row.auth_status}}</el-tag>
            <!--                        <el-tag type="info" v-show="scope.row.is_auth==2">已拒绝</el-tag>-->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="operator"
        label="审核人"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope">
          <div>{{scope.row.operator==null?'无':scope.row.operator}}</div>
        </template>
      </el-table-column>
      <el-table-column label="审核" width='250'>
        <template slot-scope="scope">
          <el-button type='primary' v-if="scope.row.is_auth==0" size="mini"  @click="passApplication(scope.row.id)" >通过</el-button>
          <el-button type='danger' v-if="scope.row.is_auth==0" size="mini" @click="denyApplication(scope.row.id)" >拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 在职证明 -->
    <el-dialog title="在职证明" :visible.sync="licenseVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px" >
        <div align="center"> <img :src="licenseImg" alt="" style="max-width:400px;margin:0 auto"></div>
      </el-form>
    </el-dialog>
    <!-- 在职证明end -->



  </div>
</template>
<script>
  export default {
    name:'member',
    data() {
      return {
        licenseImg:'',//在职证明图片
        licenseVisible:false,
        searchText:'',
        userAuthId:'',//选中的用户id

        vipList:[],
        executor:'',
        loading:false,

        authStatusOption:'',//头部筛选认证状态
        authStatusOptionsSearch:[
          {label:'全部',value:-1},
          {label:'待处理',value:0},
          {label:'通过',value:1},
          {label:'拒绝',value:2}
        ],


        consultationDetail:{unit_auth_info:{}},
        tableData: [{}],
        page:1,
        totalPage:0
      }
    },
    watch: {

    },
    methods: {
      showLicense(scope){
        //显示在职证明
        this.licenseVisible=true;
        this.licenseImg=scope.work_img_url
      },
      search(){
        this.page=1;
        this.getUnitEmployeeList()
      },
      async getUnitEmployeeList(){
        let params={
          page:this.page,
          limit:16,
          unit_id:this.id,
          keyword:this.searchText,
          status:this.authStatusOption==-1?'':this.authStatusOption
        }
        let res=await this.$api.getUnitAuthLists(
          params);
        if(res.data.level=='success'){
          this.tableData=res.data.data;
          this.totalPage=res.data.page_info.total;
        }
      },
      pageChange(e){
        //翻页
        this.page=e;
        this.getUnitEmployeeList();
      },
      async passApplication(id){
        //通过审核
        let judge=null;
        let tit='通过该申请?';
        try {
          judge=  await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge='cancel'
        }
        if(judge=='confirm'){
          this.changePersonalAuthStatus(id)
        }
        console.log(judge)
      },
      async denyApplication(id){
        //拒绝审核
        let judge=null;
        let tit='拒绝该申请?';
        try {
          judge=  await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge='cancel'
        }
        if(judge=='confirm'){
          this.changePersonalAuthStatus(id,'refusal')
        }
        console.log(judge)
      },
      async changePersonalAuthStatus(id,type){
        let params={
          id:id,
          type:type
        }
        let res =await this.$api.changePersonalAuthStatus(params)
        if(res.data.level=='success'){
          this.$message.success(res.data.message);
          this.getUnitEmployeeList()
        }else{
          this.$message.error(res.data.message);
        }
      },

      toCustomer_detail(id){
        this.$router.push({name:'Customer_detail',query:{id:id}})
      },
      initData(){
        this.member=this.$options.data().member;
      }

    },
    mounted() {
      this.id=this.$route.query.id
      this.getUnitEmployeeList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen{
    margin-top: -10px !important;
  }
  .action-bar-wrapper{
    position: sticky;
    z-index: 1;
    top:-10px;
  }
  .action-bar{
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .action-bar-input{
      width: 250px;
      margin-right: 14px;
    }
    .task-form-text{
      color: #666666;
    }
  }
  .el-table-style{
    width: 100%;
    border: 1px solid #f2f2f2;
  }
  .footer-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }
  .dialog-footer{
    text-align: center;
  }
  .executorList{
    display: flex;
    flex-wrap: wrap;
    div{
      margin:10px;
      border:1px solid #eee;
      border-radius: 5px;
      padding:5px 10px;
    }
  }
</style>
